﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "入职审核管理";
    Layout = null;
}

<!-- 引入Layui CSS -->
<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet">

<style>
    /* iframe中的页面样式优化 */
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #f5f5f5;
        overflow-x: hidden;
        font-family: 'Microsoft YaHei', Arial, sans-serif;
    }
    
    .page-container {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        overflow: hidden;
        margin: 10px;
        height: calc(100vh - 20px);
        display: flex;
        flex-direction: column;
    }
    
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 20px;
        margin-bottom: 0;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .page-header h2 {
        margin: 0;
        color: white;
        font-size: 20px;
        font-weight: 500;
        display: flex;
        align-items: center;
    }
    
    .page-header h2 i {
        margin-right: 8px;
        font-size: 22px;
    }
    
    .search-form {
        background: linear-gradient(to bottom, #fafafa, #f0f0f0);
        border-bottom: 1px solid #e0e0e0;
        padding: 15px 20px;
        margin: 0;
        flex-shrink: 0;
    }
    
    .search-row {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .search-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .search-item label {
        width: 70px;
        font-size: 14px;
        color: #333;
        font-weight: 500;
        margin-right: 10px;
        flex-shrink: 0;
    }
    
    .search-item input {
        width: 180px;
        height: 36px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        padding: 0 12px;
        font-size: 14px;
        transition: border-color 0.3s;
    }
    
    .search-item input:focus {
        border-color: #667eea !important;
        outline: none !important;
    }
    
    .search-buttons {
        display: flex;
        gap: 10px;
        margin-left: auto;
    }
    
    .btn {
        height: 36px;
        padding: 0 16px;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: all 0.3s;
        font-weight: 500;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #5a6fd8, #6a4190) !important;
        opacity: 0.9;
    }
    
    .btn-secondary {
        background: #f5f5f5;
        color: #666;
        border: 1px solid #d9d9d9;
    }
    
    .btn-secondary:hover {
        background: #e8e8e8;
        border-color: #bbb;
    }
    
    .btn-success {
        background: linear-gradient(135deg, #52c41a, #389e0d);
        color: white;
    }
    
    .btn-success:hover {
        background: linear-gradient(135deg, #49b018, #2f7a0a) !important;
        opacity: 0.9;
    }
    
    .table-container {
        padding: 20px 20px 60px 20px;
        flex: 1;
        overflow: hidden;
        background: #fff;
    }
    
    /* 优化表格样式 */
    .layui-table-view {
        margin: 0 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .layui-table-header {
        background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    }
    
    .layui-table th {
        background: transparent !important;
        font-weight: 600 !important;
        color: #333 !important;
        border-bottom: 2px solid #667eea !important;
    }
    
    .layui-table td {
        border-bottom: 1px solid #f0f0f0 !important;
        height: 40px !important;    
    }
    
    .layui-table tbody tr:hover {
        background-color: #f8f9ff !important;
    }
    
    /* 确保表格能够自适应容器高度 */
    #onboardingAuditsTable + .layui-table-view {
        height: 100% !important;
    }
    
    /* 状态标签优化 */
    .layui-badge {
        padding: 8px 4px !important;
        border-radius: 15px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        height: 26px !important;
        line-height: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        min-width: 60px !important;
        justify-content: center !important;
    }
    
    /* 操作按钮优化 */
    .layui-table-view .layui-btn-xs {
        height: 26px;
        line-height: 26px;
        padding: 0 8px;
        font-size: 12px;
        border-radius: 13px;
        margin: 0 2px;
    }
    
    /* 分页样式优化 */
    .layui-laypage {
        margin-top: 20px !important;
        padding: 15px 0 !important;
        text-align: center !important;
        background: #fafafa !important;
        border-top: 1px solid #e6e6e6 !important;
        border-radius: 0 0 8px 8px !important;
    }
    
    .layui-laypage a, 
    .layui-laypage span {
        border-radius: 6px !important;
        margin: 0 3px !important;
        padding: 8px 12px !important;
        transition: all 0.3s ease !important;
        border: 1px solid #d9d9d9 !important;
        background: #fff !important;
    }
    
    .layui-laypage a:hover {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: white !important;
        border-color: #667eea !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
    }
    
    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        border-radius: 6px !important;
        color: white !important;
        border: 1px solid #667eea !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
    }
    
    .layui-laypage .layui-laypage-count {
        color: #666 !important;
        font-size: 13px !important;
        margin-right: 15px !important;
    }
    
    .layui-laypage .layui-laypage-limits select {
        border-radius: 6px !important;
        border: 1px solid #d9d9d9 !important;
        padding: 6px 10px !important;
        background: #fff !important;
    }
    
    .layui-laypage .layui-laypage-refresh {
        color: #667eea !important;
        border: 1px solid #667eea !important;
        background: #fff !important;
    }
    
    .layui-laypage .layui-laypage-refresh:hover {
        background: #667eea !important;
        color: white !important;
    }
    
    .layui-laypage .layui-laypage-skip {
        margin-left: 15px !important;
    }
    
    .layui-laypage .layui-laypage-skip input {
        border-radius: 6px !important;
        border: 1px solid #d9d9d9 !important;
        padding: 6px 10px !important;
        width: 50px !important;
        text-align: center !important;
    }
    
    .layui-laypage .layui-laypage-skip input:focus {
        border-color: #667eea !important;
        outline: none !important;
        box-shadow: 0 0 5px rgba(102, 126, 234, 0.3) !important;
    }
    
    .layui-laypage .layui-laypage-skip button {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: white !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 6px 12px !important;
        margin-left: 5px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .layui-laypage .layui-laypage-skip button:hover {
        opacity: 0.9 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
    }
    
    /* 自定义分页信息统计样式 */
    .pagination-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
        border-top: 1px solid #e6e6e6 !important;
        border-radius: 0 0 8px 8px !important;
        margin-top: -1px !important;
        font-size: 13px !important;
        color: #666 !important;
    }
    
    .pagination-info .info-left {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    .pagination-info .info-right {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    .pagination-info .total-info,
    .pagination-info .page-info,
    .pagination-info .selected-info {
        color: #666 !important;
        font-weight: 500 !important;
    }
    
    .pagination-info .total-info span,
    .pagination-info .page-info span,
    .pagination-info .selected-info span {
        color: #667eea !important;
        font-weight: 600 !important;
    }
    
    .pagination-info .btn-sm {
        height: 28px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        line-height: 28px !important;
    }
    
    .pagination-info .btn-danger {
        background: linear-gradient(135deg, #ff4757, #ff3742) !important;
        border: none !important;
        color: white !important;
        border-radius: 14px !important;
        transition: all 0.3s ease !important;
    }
    
    .pagination-info .btn-danger:hover {
        background: linear-gradient(135deg, #ff3742, #ff2837) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3) !important;
    }
    
    /* 响应式设计 */
    @@media screen and (max-width: 1200px) {
        .search-row {
            flex-direction: column;
            align-items: stretch;
        }
        
        .search-buttons {
            margin-left: 0 !important;
            justify-content: flex-start;
        }
        
        .search-item input {
            width: 200px !important;
        }
    }
</style>

<div class="page-container">
    <!-- 页面标题 -->
    <div class="page-header">
        <h2><i class="layui-icon layui-icon-user"></i> 入职审核管理</h2>
    </div>

    <!-- 条件查询区域 -->
    <div class="search-form">
        <form class="layui-form" lay-filter="searchForm">
            <div class="search-row">
                <div class="search-item">
                    <label>人员名称</label>
                    <input type="text" name="personName" placeholder="请输入人员名称" autocomplete="off">
                </div>
                <div class="search-item">
                    <label>面试官</label>
                    <input type="text" name="interviewer" placeholder="请输入面试官姓名" autocomplete="off">
                </div>
                <div class="search-buttons">
                    <button type="button" class="btn btn-primary" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="button" class="btn btn-secondary" id="resetBtn">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                    <button type="button" class="btn btn-success" id="exportBtn">
                        <i class="layui-icon layui-icon-export"></i> 导出
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-container">
        <table class="layui-hide" id="onboardingAuditsTable" lay-filter="onboardingAuditsTable"></table>
        
        <!-- 自定义分页信息统计 -->
        <div class="pagination-info" id="paginationInfo" style="display: none;">
            <div class="info-left">
                <span class="total-info">共 <span id="totalCount">0</span> 条记录</span>
                <span class="page-info">第 <span id="currentPage">1</span> 页，共 <span id="totalPages">1</span> 页</span>
            </div>
            <div class="info-right">
                <span class="selected-info">已选择 <span id="selectedCount">0</span> 条记录</span>
                <button type="button" class="btn btn-sm btn-danger" id="batchDeleteBtn" style="display: none;">
                    <i class="layui-icon layui-icon-delete"></i> 批量删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 操作列工具栏模板 -->
<script type="text/html" id="operationBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail" title="查看详情">
        <i class="layui-icon layui-icon-about"></i> 查看
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" title="编辑信息">
        <i class="layui-icon layui-icon-edit"></i> 编辑
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete" title="删除记录">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </a>
</script>

<!-- 面试反馈状态模板 -->
<script type="text/html" id="feedbackStatusTpl">
    {{# if(d.feedbackStatus === '还可以') { }}
        <span class="layui-badge layui-bg-orange">
            <i class="layui-icon layui-icon-ok-circle" style="margin-right: 4px;"></i>还可以
        </span>
    {{# } else if(d.feedbackStatus === '最新一轮面试...') { }}
        <span class="layui-badge layui-bg-blue">
            <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="margin-right: 4px;"></i>最新一轮面试...
        </span>
    {{# } else { }}
        <span class="layui-badge layui-bg-gray">{{d.feedbackStatus}}</span>
    {{# } }}
</script>

<!-- 面试结果状态模板 -->
<script type="text/html" id="resultStatusTpl">
    {{# if(d.resultStatus === '入职通过') { }}
        <span class="layui-badge layui-bg-green">
            <i class="layui-icon layui-icon-ok" style="margin-right: 4px;"></i>入职通过
        </span>
    {{# } else if(d.resultStatus === '待定') { }}
        <span class="layui-badge layui-bg-orange">
            <i class="layui-icon layui-icon-time" style="margin-right: 4px;"></i>待定
        </span>
    {{# } else { }}
        <span class="layui-badge layui-bg-red">
            <i class="layui-icon layui-icon-close" style="margin-right: 4px;"></i>{{d.resultStatus}}
        </span>
    {{# } }}
</script>

<!-- 性别显示模板 -->
<script type="text/html" id="genderTpl">
    {{# if(d.gender === '男') { }}
        <span class="layui-badge layui-bg-blue">
            <i class="layui-icon layui-icon-username" style="margin-right: 4px;"></i>男
        </span>
    {{# } else if(d.gender === '女') { }}
        <span class="layui-badge" style="background: #ff69b4 !important;">
            <i class="layui-icon layui-icon-username" style="margin-right: 4px;"></i>女
        </span>
    {{# } else { }}
        <span class="layui-badge layui-bg-gray">{{d.gender}}</span>
    {{# } }}
</script>

<!-- 引入jQuery和Layui JS -->
<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>

<script>
$(document).ready(function() {
    layui.use(['table', 'form', 'layer', 'laydate'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;

        // 初始化数据表格
        var tableIns = table.render({
            elem: '#onboardingAuditsTable',
            url: '/HumanResources/GetOnboardingAudits', // 后端数据接口
            page: {
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                curr: 1,
                limit: 10,
                limits: [10, 20, 50, 100],
                prev: '<i class="layui-icon layui-icon-left"></i>',
                next: '<i class="layui-icon layui-icon-right"></i>',
                first: 1,
                last: 100,
                groups: 5,
                theme: '#667eea'
            },
            loading: true,
            height: 'full-120', // 自适应高度，减去页头和搜索区域的高度
            cols: [[
                {type: 'checkbox', fixed: 'left', width: 50},
                {field: 'id', title: 'ID', width: 80, sort: true, hide: true},
                {field: 'personName', title: '人员名称', width: 120, sort: true, align: 'center'},
                {field: 'phone', title: '联系电话', width: 140, align: 'center'},
                {field: 'gender', title: '性别', width: 90, templet: '#genderTpl', align: 'center'},
                {field: 'level', title: '定级', width: 100, align: 'center'},
                {field: 'feedbackStatus', title: '面试反馈', width: 160, templet: '#feedbackStatusTpl', align: 'center'},
                {field: 'resultStatus', title: '面试结果', width: 120, templet: '#resultStatusTpl', align: 'center'},
                {field: 'interviewCount', title: '面试次数', width: 100, sort: true, align: 'center'},
                {field: 'interviewTime', title: '面试时间', width: 140, sort: true, align: 'center'},
                {field: 'interviewer', title: '面试官', width: 120, align: 'center'},
                {title: '操作', width: 200, toolbar: '#operationBar', fixed: 'right', align: 'center'}
            ]],
            text: {
                none: '暂无相关数据'
            },
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'msg',
                countName: 'count',
                dataName: 'data'
            }
        });

        // 搜索功能
        form.on('submit(search)', function(data) {
            var field = data.field;
            console.log('搜索条件:', field);
            
            // 重新加载表格数据
            table.reload('onboardingAuditsTable', {
                where: field,
                page: {
                    curr: 1 // 重新从第1页开始
                }
            });
            
            return false; // 阻止表单跳转
        });
        
        // 手动绑定搜索按钮点击事件（备用方案）
        $('.btn-primary').on('click', function() {
            var personName = $('input[name="personName"]').val();
            var interviewer = $('input[name="interviewer"]').val();
            
            table.reload('onboardingAuditsTable', {
                where: {
                    personName: personName,
                    interviewer: interviewer
                },
                page: {
                    curr: 1
                }
            });
        });

        // 重置功能
        $('#resetBtn').on('click', function() {
            // 清空表单
            $('input[name="personName"]').val('');
            $('input[name="interviewer"]').val('');
            
            // 重新加载表格数据（不带搜索条件）
            table.reload('onboardingAuditsTable', {
                where: {},
                page: {
                    curr: 1
                }
            });
            
            layer.msg('已重置搜索条件', {
                icon: 1,
                time: 1500
            });
        });

        // 导出功能
        $('#exportBtn').on('click', function() {
            // 获取当前搜索条件
            var searchData = {
                personName: $('input[name="personName"]').val(),
                interviewer: $('input[name="interviewer"]').val()
            };
            
            // 构建导出URL
            var exportUrl = '/HumanResources/ExportOnboardingAudits?' + $.param(searchData);
            
            layer.confirm('确定要导出当前数据吗？', {
                icon: 3,
                title: '导出确认',
                btn: ['确定导出', '取消'],
                skin: 'layui-layer-molv'
            }, function(index) {
                // 显示导出进度
                var loadIndex = layer.load(1, {
                    shade: [0.1, '#fff']
                });
                
                // 模拟导出过程
                setTimeout(function() {
                    // 创建隐藏的下载链接
                    var link = document.createElement('a');
                    link.href = exportUrl;
                    link.download = '入职审核数据_' + new Date().toISOString().slice(0, 10) + '.xlsx';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    
                    layer.close(loadIndex);
                    layer.close(index);
                    layer.msg('导出成功！', {
                        icon: 1,
                        time: 2000
                    });
                }, 1000);
            });
        });

        // 监听工具条
        table.on('tool(onboardingAuditsTable)', function(obj) {
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;

            if (layEvent === 'detail') {
                // 查看详情
                layer.open({
                    type: 1,
                    title: '<i class="layui-icon layui-icon-about"></i> 查看详情',
                    shadeClose: true,
                    shade: 0.5,
                    maxmin: true,
                    area: ['600px', '400px'],
                    content: '<div style="padding: 20px; line-height: 1.8;">' +
                        '<p><strong>人员名称：</strong>' + data.personName + '</p>' +
                        '<p><strong>联系电话：</strong>' + data.phone + '</p>' +
                        '<p><strong>性别：</strong>' + data.gender + '</p>' +
                        '<p><strong>定级：</strong>' + data.level + '</p>' +
                        '<p><strong>面试反馈：</strong>' + data.feedbackStatus + '</p>' +
                        '<p><strong>面试结果：</strong>' + data.resultStatus + '</p>' +
                        '<p><strong>面试次数：</strong>' + data.interviewCount + '</p>' +
                        '<p><strong>面试时间：</strong>' + data.interviewTime + '</p>' +
                        '<p><strong>面试官：</strong>' + data.interviewer + '</p>' +
                        '</div>'
                });
            } else if (layEvent === 'edit') {
                // 编辑
                layer.open({
                    type: 2,
                    title: '<i class="layui-icon layui-icon-edit"></i> 编辑信息',
                    shadeClose: true,
                    shade: 0.5,
                    maxmin: true,
                    area: ['800px', '600px'],
                    content: '/HumanResources/EditOnboardingAudit?id=' + data.id
                });
            } else if (layEvent === 'delete') {
                // 删除
                layer.confirm('确定要删除 <strong style="color: #ff5722;">' + data.personName + '</strong> 的记录吗？', {
                    icon: 3,
                    title: '删除确认',
                    btn: ['确定删除', '取消'],
                    skin: 'layui-layer-molv'
                }, function(index) {
                    // 显示删除进度
                    var loadIndex = layer.load(2, {
                        shade: [0.1, '#fff']
                    });
                    
                    // 发送删除请求
                    $.ajax({
                        url: '/HumanResources/DeleteOnboardingAudit',
                        type: 'DELETE',
                        data: { id: data.id },
                        success: function(result) {
                            layer.close(loadIndex);
                            if (result.success) {
                                obj.del();
                                layer.close(index);
                                layer.msg('删除成功！', {
                                    icon: 1,
                                    time: 2000
                                });
                            } else {
                                layer.msg('删除失败：' + result.message, {
                                    icon: 2,
                                    time: 3000
                                });
                            }
                        },
                        error: function() {
                            layer.close(loadIndex);
                            layer.msg('删除失败，请稍后重试', {
                                icon: 2,
                                time: 3000
                            });
                        }
                    });
                });
            }
        });

        // 监听复选框选择
        table.on('checkbox(onboardingAuditsTable)', function(obj) {
            console.log(obj.checked); // 当前是否选中状态
            console.log(obj.data); // 选中行的相关数据
            console.log(obj.type); // 如果触发的是全选，则为：all，如果触发的是单选，则为：one
            
            // 更新选中状态
            updateSelectedCount();
        });
        
        // 监听分页事件
        table.on('page(onboardingAuditsTable)', function(obj) {
            console.log('分页事件', obj);
            updatePaginationInfo(obj);
        });
        
        // 更新分页信息
        function updatePaginationInfo(pageObj) {
            if (pageObj) {
                $('#currentPage').text(pageObj.curr);
                $('#totalPages').text(Math.ceil(pageObj.count / pageObj.limit));
                $('#totalCount').text(pageObj.count);
            }
            $('#paginationInfo').show();
        }
        
        // 更新选中数量
        function updateSelectedCount() {
            var checkStatus = table.checkStatus('onboardingAuditsTable');
            var selectedCount = checkStatus.data.length;
            $('#selectedCount').text(selectedCount);
            
            if (selectedCount > 0) {
                $('#batchDeleteBtn').show();
            } else {
                $('#batchDeleteBtn').hide();
            }
        }
        
        // 批量删除功能
        $('#batchDeleteBtn').on('click', function() {
            var checkStatus = table.checkStatus('onboardingAuditsTable');
            var selectedData = checkStatus.data;
            
            if (selectedData.length === 0) {
                layer.msg('请先选择要删除的记录', {
                    icon: 2,
                    time: 2000
                });
                return;
            }
            
            var names = selectedData.map(function(item) {
                return item.personName;
            }).join('、');
            
            layer.confirm('确定要删除选中的 <strong style="color: #ff5722;">' + selectedData.length + '</strong> 条记录吗？<br/>包括：' + names, {
                icon: 3,
                title: '批量删除确认',
                btn: ['确定删除', '取消'],
                skin: 'layui-layer-molv'
            }, function(index) {
                var loadIndex = layer.load(2, {
                    shade: [0.1, '#fff']
                });
                
                // 模拟批量删除请求
                setTimeout(function() {
                    layer.close(loadIndex);
                    layer.close(index);
                    
                    // 重新加载表格
                    table.reload('onboardingAuditsTable');
                    
                    layer.msg('批量删除成功！', {
                        icon: 1,
                        time: 2000
                    });
                    
                    // 重置选中状态
                    updateSelectedCount();
                }, 1000);
            });
        });
    });
});
</script>
